<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Compound Visual Test : Draggable in Accordion</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"
	type="text/css">
<script type="text/javascript" src="../../../jquery-1.8.2.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script>
<style type="text/css">
#main-draggable {
	width: 300px;
	position: absolute;
	right: 100px;
}

#main-draggable-handle {
	padding: 1em;
	margin: 0;
}

.draggable {
	width: 10em;
	margin: 0.5em;
}
</style>
<script type="text/javascript">
	$(function() {
		$( ".draggable" ).addClass( "ui-widget ui-widget-content ui-corner-all" )
		$( ".draggable" ).draggable({
			helper: "clone",
			appendTo: "body"
		});
		
		// PROBLEM: nested accordions must be initialized before outer accordion
		$( "#accordion > div" ).accordion();
		$( "#accordion" ).accordion();
		
		
		// PROBLEM: nested widgets must be initialized before tabs
		$( "#tabs" ).tabs();
		
		$( "#main-draggable" ).draggable({
			handle: "#main-draggable-handle"
		});
	});
	</script>
</head>
<body>
	<div id="main-draggable"
		class="ui-widget ui-widget-content ui-corner-all">
		<p id="main-draggable-handle" class="ui-widget-header ui-corner-all">Drag
			me around!</p>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First Tab</a></li>
				<li><a href="#tabs-2">Second Tab</a></li>
			</ul>
			<div id="tabs-1">
				<p>Click the other tab!</p>
			</div>
			<div id="tabs-2">
				<div id="accordion">
					<h3>
						<a>Accordion Group 1</a>
					</h3>
					<div id="accordion-1-1">
						<h3>
							<a href="#">Header 1-1</a>
						</h3>
						<div>
							<div class="draggable">Draggable 1-1</div>
							<div class="draggable">Draggable 1-2</div>
							<div class="draggable">Draggable 1-3</div>
							<div class="draggable">Draggable 1-4</div>
							<div class="draggable">Draggable 1-5</div>
						</div>
						<h3>
							<a href="#">Header 1-2</a>
						</h3>
						<div>
							<div class="draggable">Draggable 2-1</div>
							<div class="draggable">Draggable 2-2</div>
							<div class="draggable">Draggable 2-3</div>
							<div class="draggable">Draggable 2-4</div>
							<div class="draggable">Draggable 2-5</div>
						</div>
					</div>
					<h3>
						<a>Accordion Group 2</a>
					</h3>
					<div id="accordion-1-2">
						<h3>
							<a href="#">Header 2-1</a>
						</h3>
						<div>
							<div class="draggable">Draggable 1-1</div>
							<div class="draggable">Draggable 1-2</div>
							<div class="draggable">Draggable 1-3</div>
							<div class="draggable">Draggable 1-4</div>
							<div class="draggable">Draggable 1-5</div>
						</div>
						<h3>
							<a href="#">Header 2-2</a>
						</h3>
						<div>
							<div class="draggable">Draggable 2-1</div>
							<div class="draggable">Draggable 2-2</div>
							<div class="draggable">Draggable 2-3</div>
							<div class="draggable">Draggable 2-4</div>
							<div class="draggable">Draggable 2-5</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>
